<template>
    <section style="background:#fafafa;min-height:100vh;">
        <div class="homehead">
            <div class="header">
                <div class="header-box">
                    <van-image
                        round
                        :src="user.headimgurl"
                        :show-error="true"
                        :error-icon="require('@/assets/err.jpg')"
                        class="user-icon"
                    />
                </div>
                <p class="user-name">{{user.nickname}}</p>
            </div>
            <div class="mycenter-fixbox">
                <div class="mycenter-box__list-box">
                    <div class="mycenter-box__list-piece">
                        <p @click="toRaiseFunds">
                            <img src="../../assets/icon-center-money.png" />
                            <br />我的筹款
                        </p>
                    </div>
                    <div class="mycenter-box__list-piece">
                        <p @click="toHelp">
                            <img src="../../assets/icon-right-money.png" />
                            <br />我的捐助
                        </p>
                    </div>
                    <!-- <div class="mycenter-box__list-piece">
                        <p @click="toRecord">
                            <img src="../../assets/icon-center-hz.png" />
                            <br />我的提现
                        </p>
                    </div>-->
                </div>
            </div>
        </div>
        <van-popup v-model="show">
            <img src="@/assets/ewm.jpg" />
        </van-popup>
        <div class="function">
            <div class="sub-title bd">更多服务</div>
            <van-cell title="常见问题" icon="question-o" @click="toissue()">
                <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
            <van-cell title="微信关注" icon="manager-o" @click="show=true">
                <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
            </van-cell>
            <a href="tel:4001180478">
                <van-cell title="联系客服" icon="phone-o">
                    <p class="tel">400-118-0478</p>
                </van-cell>
            </a>
        </div>
        <Bottom />
    </section>
</template>				

<script>
import { Cell, CellGroup, Popup, Icon, Image } from "vant";
import { customerInfo } from "@/api/api";
import Bottom from "@/components/bottom";
export default {
    name: "Ppayee",
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Icon.name]: Icon,
        [Popup.name]: Popup,
        Bottom,
        [Image.name]: Image
    },
    data() {
        return {
            user: {},
            show: false
        };
    },
    created() {
        customerInfo().then(res => {
            if (res.code) {
                this.user = res.results;
            } else {
                Toast(res);
            }
        });
    },
    methods: {
        toHelp() {
            this.$router.push({
                path: "/MyHelp"
            });
        },
        toRaiseFunds() {
            this.$router.push({
                path: "/RaiseFunds"
            });
        },
        toRecord() {
            this.$router.push({
                path: "/Record"
            });
        },
        toissue() {
            this.$router.push({
                path: "/issue"
            });
        }
    }
};
</script>

<style scoped>
body {
    margin: 0;
}
.homehead {
    background-image: url("../../assets/mycenter-bg.jpg");
    height: 200px;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.homehead .header {
    /* display: flex;
    align-items: center; */
    padding:40px 20px 20px 20px;
}
.header-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.homehead .header .user-icon {
    width: 62px;
    height: 62px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 40px;
    border: 2px solid #ffffff;
}
.homehead .header .user-name {
    font-size: 20px;
    font-family: "PingFangSC-Semibold";
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    color: #333;
    line-height: 38px;
}
.mycenter-fixbox {
    position: absolute;
    top: 180px;
    width: 87.2%;
    margin: 0 6.4% 0;
    padding: 16px 24px;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.02);
    border-radius: 16px;
}
.mycenter-box__list-box {
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.mycenter-box__list-piece {
    width: fit-content;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.5;
}
.mycenter-box__list-piece img {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
}
.function {
    margin-top: 70px;
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
}
.sub-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
    padding: 16px 0;
}
.function .van-cell {
    padding: 15px 0;
    background-color: #fafafa;
}
.tel{
    color: #323233;
    font-size: 14px;
    line-height: 24px;
}
</style>